<script setup>
import { useTheme } from 'vuetify'

const toggleExclusive = ref(1)

const vuetifyTheme = useTheme()
const currentTheme = vuetifyTheme.current.value.colors

const series = [{
  data: [
    400,
    200,
    650,
    500,
  ],
}]

const chartOptions = {
  chart: {
    type: 'area',
    toolbar: { show: false },
    sparkline: { enabled: true },
  },
  markers: {
    colors: 'transparent',
    strokeColors: 'transparent',
  },
  grid: { show: false },
  colors: [currentTheme.success],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 0.8,
      opacityFrom: 0.6,
      opacityTo: 0.1,
    },
  },
  dataLabels: { enabled: false },
  stroke: {
    width: 2,
    curve: 'smooth',
  },
  xaxis: {
    show: true,
    lines: { show: false },
    labels: { show: false },
    stroke: { width: 0 },
    axisBorder: { show: false },
  },
  yaxis: {
    stroke: { width: 0 },
    show: false,
  },
  responsive: [
    {
      breakpoint: 1387,
      options: { chart: { height: 80 } },
    },
    {
      breakpoint: 1200,
      options: { chart: { height: 120 } },
    },
  ],
}
</script>

<template>
  <VCard>
    <VCardText style="display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 40px 10px;">
		<h5 class="text-h5 mb-3" style="font-weight: bold;">
		  合作协议签订情况统计
		</h5>
		<VBtnToggle v-model="toggleExclusive" density="comfortable" size="small" style="block-size: 31px;">
			<VBtn color="primary" size="small">本月</VBtn>
			<VBtn color="primary" size="small">本季度</VBtn>
			<VBtn color="primary" size="small">本年度</VBtn>
		</VBtnToggle>
    </VCardText>

    <VueApexCharts
      :options="chartOptions"
      :series="series"
      :height="122"
    />
  </VCard>
</template>
